
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>山东省非物质文化遗产</title>
    <meta content="" name="description" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link rel="shortcut icon" type="image/x-icon" href="./assets/images/ico.png"/>

    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" >
    <link rel="stylesheet" type="text/css" href="./css/login.css" >
    <!-- JavaScript -->
    <script type="text/javascript" src="./js/plugins/jquery.js"></script>
    <script type="text/javascript" src="./js/login.js"></script>
</head>
<body>
<!-- state:独立的登录部分 -->
<article>
    <div class="login-content">
        <!-- 标题 -->
        <div class="login-title-con">
            <h4>山东省非物质文化遗产管理系统</h4>
        </div>
        <form id="ipt_form" novalidate="novalidate" style="padding: 0 40px;">
            <!-- input -->
            <div class="login-input-con">
                <!-- 用户名 -->
                <div class="login-tr">
                    <i class="layui-icon layui-icon-username fa-user"></i>
                    <input type="text" id="telphone" name="username" placeholder="手机号" tabindex="1" />
                </div>
                <!-- 密码 -->
                <div class="login-tr">
                    <i class="layui-icon layui-icon-password fa-lock"></i>
                    <input type="password" id="password" name="password" placeholder="密码" tabindex="2" />
                </div>
            </div>
            <!-- 按钮 -->
            <div class="login-btn-con">
                <input type="button" value="账号登录" id="login"; tabindex="3">
            </div>

            <!-- 游客登录 -->
            <div style="text-align: center">
                <a onclick="loginYN();" tabindex="3" style="font-size: 16px;color: white;cursor: pointer;">游客登录</a>
            </div>


        </form>
    </div>
</article>
<!-- end:独立的登录部分 -->
<footer>
    <div class="loginfoot">山东省非物质文化遗产管理系统  Version 1.0.0</div>
</footer>
</body>

<script>

    var getWebRootPath = function () {
        var curWwwPath = window.location.host;
        var localhostPath = "http://" + curWwwPath;
        return (localhostPath);
    };
    // 所有的jquery的动态绑定元素需要页面渲染完成以后才可以操作
    jQuery(document).ready(function () {

        $("#login").on("click",function () {
            //拿到界面上所有元素的值
            var telephone=$("#telphone").val();
            var password=$("#password").val();
            if(telephone==null || telephone==""){
                alert("手机号不能为空");
                //我们使用的是ajax传值，所以要捕获点击事件，不让它冒泡排序到上一层
                return false;
            }
            if(password==null || password==""){
                alert("密码不能为空");
                //我们使用的是ajax传值，所以要捕获点击事件，不让它冒泡排序到上一层
                return false;
            }

            $.ajax({
                //头
                type:"POST",
                contentType:"application/x-www-form-urlencoded",

                url:getWebRootPath() +"/user/login",

                //传参
                data:{
                    //获取用户输入的telphone\password等值
                    "telephone":telephone,
                    "password":password,
                },
                //成功的回调函数
                //data是后端输出的json数据
                //与后端的@CrossOrigin(allowCredentials = "true",allowedHeaders = "*")相互呼应
                xhrFields:{withCredentials:true},
                success:function (data) {

                    console.log(data);
                    if(data.status==="success"){
                        window.location.href="index.html"


                        $.cookie('TelephoneNum', telephone, { expires: 0.05, path: '/' });
                    }else {
                        window.top.alert("登录失败，原因为" + data.data.errMsg);
                    }

                },
                //失败的回调函数
                error:function (data) {
                    window.top.alert("登录失败，原因为"+data.responseText);
                }
            });
            return false;
        });

    });

</script>
</html>